<template>
	<view @clearAll="clearAllParams">
		<!-- <view class="fixed">当前已搜索到{{ total }}条数据</view> -->
		<uni-popup ref="popup" type="bottom" :is-mask-click="false"   >
			<view class="popupContent"  :style="{maxHeight: (scrollHeight +100) + 'px'}">
				<view class="title">高级查询</view>
				<view class="ul"   :style="{maxHeight: scrollHeight + 'px'}">
					<view class="li" v-if="showTime">
						<view class="left">检查时间：</view>
						<view class="right">
							<view class="input-container" style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
							<!-- <uni-datetime-picker  v-model="checkTimeArr" type="daterange"  :border="false"
								:clear-icon="true" rangeSeparator="至" /> --> 
							<input type="text" placeholder="请选择检查时间" :value="checkTimeStr"  @tap="showDate" :disabled="true"  :border="false"  style="font-size: 19rpx;margin-left: -10px;"
								  placeholder-style="color:#999999:font-size:19rpx"  />
							  <image v-if="checkTimeStr != ''" @tap="clearDate" src="/static/img/no.png" style="width: 14px;height: 14px;" ></image>
							</view> 
						</view>
					</view>
					<view class="li">
						<view class="left">生产经营主体：</view>
						<view class="right">
								<input type="text" placeholder="请输入生产经营主体名称" v-model="companyName"   :border="false"  style="font-size: 19rpx;margin-left: -10px;"
									  placeholder-style="color:#999999:font-size:19rpx" />
						</view>
					</view>
					<view class="li">
						<view class="left">经营地址：</view>
						<view class="right">
								<input type="text" placeholder="请输入经营地址" v-model="companyAddress"  style="font-size: 19rpx;margin-left: -10px;"  :border="false" 
									placeholder-style="color:#999999:font-size:19rpx"/>
						</view>
					</view>
					<view class="li"  v-if="showCreditCode">
						<view class="left">社会信用代码：</view>
						<view class="right">
								<input type="text" placeholder="请输入社会信用代码" v-model="creditCode"  style="font-size: 19rpx;margin-left: -10px;"  :border="false" 
									placeholder-style="color:#999999:font-size:19rpx"/>
						</view>
					</view>
					<view class="li" v-if="showCheckStatus">
						<view class="left">检查情况：</view>
						<view class="right">
							<uni-data-select v-model="checkStatus" :localdata="inspectStatusList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li" v-if="showRecificationStatus">
						<view class="left">整改情况：</view>
						<view class="right">
							<uni-data-select v-model="checkStatus" :localdata="recificationStatusList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li" v-if="showInvestigationStatus">
						<view class="left">处理情况：</view>
						<view class="right">
							<uni-data-select v-model="checkStatus" :localdata="investigationStatusList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li" v-if="showCaseStatus">
						<view class="left">是否立案：</view>
						<view class="right">
							<uni-data-select v-model="caseStatus" :localdata="existPeripheryList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li" v-if="showMarkStatus">
						<view class="left">评分情况：</view>
						<view class="right">
							<uni-data-select v-model="checkStatus" :localdata="markStatusList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li" v-if="showRateStatus">
						<view class="left">评级情况：</view>
						<view class="right">
							<uni-data-select v-model="checkStatus" :localdata="rateStatusList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">风险等级：</view>
						<view class="right">
							<uni-data-select v-model="companyLevel" :localdata="companyLevelList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li" v-if="showProcessResults">
						<view class="left">处理结果：</view>
						<view class="right">
							<uni-data-select v-model="processResults" :localdata="processResultsList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">监管环节：</view>
						<view class="right">
							<uni-data-select v-model="companyProcess" :localdata="processList" :clear="processClear"
								@change="switchProcess"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">一级业态：</view>
						<view class="right">
							<uni-data-select v-model="firstType" :localdata="firstTypeList" :clear="true"
								@change="switchType"></uni-data-select>
						</view>
					</view>
					<!-- 2024-12-5日新增 -->
					<view class="li">
						<view class="left">是否网络经营：</view>
						<view class="right">
							<uni-data-select v-model="isOperate" :localdata="existPeripheryList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<!-- <view class="li">
						<view class="left">二级业态：</view>
						<view class="right">
							<uni-data-select v-model="twoType" :localdata="twoTypeList"
								:clear="true"></uni-data-select>
						</view>
					</view> -->
					<view class="li">
						<view class="left">网格负责人：</view>
						<view class="right">
							<uni-data-select v-model="supervisePerson" :localdata="supervisePersonList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">是否校园周边：</view>
						<view class="right">
							<uni-data-select v-model="existPeriphery" :localdata="existPeripheryList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">是否农产品批发：</view>
						<view class="right">
							<uni-data-select v-model="existWholesaleAgricultura" :localdata="existPeripheryList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">是否主体异常：</view>
						<view class="right">
							<uni-data-select v-model="existEx" :localdata="existPeripheryList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">仅售预包装食品：</view>
						<view class="right">
							<uni-data-select v-model="onlyPrePackaging" :localdata="existPeripheryList"
								:clear="true"></uni-data-select>
						</view>
					</view>
					<view class="li">
						<view class="left">含特殊食品销售：</view>
						<view class="right">
							<uni-data-select v-model="haveSpecialFood" :localdata="existPeripheryList"
								:clear="true"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="button">
					<button class="determine" @click="confirmBtn">确定</button>
					<button class="cancellation" @click="cancellation">取消</button>
				</view>
			</view>
		</uni-popup>
		<liu-calendar-date ref="calendar2" isRange  @checked='selectedDate'  ></liu-calendar-date>
	</view>
</template>

<script>
 
	export default {
		name: "CommonSearchCompont",
		props:{
			 showSearchCompont:{
				 default: false,
				 type:Boolean,
				 require:true
			 },
			 showTime:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showCheckStatus:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showRecificationStatus:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showInvestigationStatus:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showCaseStatus:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showProcessResults:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showMarkStatus:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showRateStatus:{
				default: false,
				type:Boolean,
				require:false
			 },
			 showCreditCode:{
				default: false,
				type:Boolean,
				require:false
			 },
			 processClear:{
				default: true,
				type:Boolean,
				require:false
			 },
			 typeWhiteList:{ //指定要哪几种监管环节
				default: "",
				type:String,
				require:false
			 }
		},
		data() {
			return {
				scrollHeight: 0 ,//弹窗高度
				checkTimeStr:'',//检查日期
				checkTimeArr:[],//检查日期
				companyName: '', //主体名称
				companyAddress: '', //地址信息
				checkStatus:'',//检查情况
				caseStatus:'',//是否立案
				companyLevel:'',//企业等级
				processResults:'',//处理结果
				companyProcess:'',//监管环节
				firstType:'',//一级业态
				twoType:'',//二级业态
				supervisePerson:'',//网格负责人
				existPeriphery:'',//是否校园周边
				existWholesaleAgricultura:'',//是否农产批发
				existEx:'',//是否主体异常
				onlyPrePackaging:'',//仅售预包装食品
				haveSpecialFood:'',//含特殊食品销售
				creditCode:'',//社会信用代码
				processList: [],
				companyLevelList: [],
				firstTypeList: [],
				twoTypeList: [],
				supervisePersonList: [], 
				existPeripheryList: [{
						value: '0',
						text: "否"
					},
					{
						value: '1',
						text: "是 "
					} 
				],
				inspectStatusList: [ {
						value: '1',
						text: "已检查"
					},
					{
						value: '2',
						text: "超期未检查"
					},
					{
						value: '3',
						text: "待检查"
					}
				],
				recificationStatusList: [ {
						value: '',
						text: "全部"
					},{
						value: '1',
						text: "已整改"
					},
					{
						value: '2',
						text: "待整改"
					}
				],
				investigationStatusList: [ {
						value: '',
						text: "全部"
					},{
						value: '1',
						text: "待处理"
					},
					{
						value: '2',
						text: "已处理"
					}
				],
				markStatusList: [ {
						value: '',
						text: "全部"
					},{
						value: '1',
						text: "已评分"
					},
					{
						value: '2',
						text: "未评分"
					}
				],
				rateStatusList: [ {
						//value: '3',
						value: '',
						text: "全部"
					},{
						value: '1',
						text: "已评级"
					},
					{
						value: '2',
						text: "未评级"
					}
				],
				processResultsList: [ {
						value: '',
						text: "全部"
					},{
						value: '1',
						text: "通过检查"
					},
					{
						value: '2',
						text: "责令整改"
					},
					{
						value: '3',
						text: "调查处理"
					}
				],
				companyLevelList: [{
						value: 'A',
						text: "A"
					},
					{
						value: 'B',
						text: "B"
					},
					{
						value: 'C',
						text: "C"
					},
					{
						value: 'D',
						text: "D"
					} 
				],
				// 2024-12-5日新增
				isOperate: '',
			};
		},
		watch:{
			showSearchCompont(value,v){ 
				if(value){
					this.$refs.popup.open("bottom");
				}else{
					this.$refs.popup.close();
				}
			} 
		}, 
		mounted() {
			this.initSearchData(); 
			this.scrollHeight = uni.getSystemInfoSync().screenHeight - 180
		},
		methods:{ 
			setCheckStatus(checkStatus){ 
				this.checkStatus = checkStatus; 
			},
			switchProcessById(processId){
				this.companyProcess = processId; 
			},
			async switchProcess(e){
				for (var i = 0; i < this.processList.length; i++) {
					if(this.processList[i].value == e){
						this.companyIndex = i;
						break;
					}
				} 
				this.firstType = '';
				this.twoType = '';
				this.firstTypeList = []; 
				//切换环节  
				const res = await  uni.$api.getCompanyTypeList({
					processId : this.processList[this.companyIndex].value,
					code:this.processList[this.companyIndex].code
				});  
				 if(res.data.code == 0){
				 	for (var i = 0; i < res.data.data.length; i++) {
				 		this.firstTypeList.push({
				 			value:res.data.data[i].VALUE,
				 			text:res.data.data[i].TEXT 
				 		})
				 	}
				 } 
			},
			async switchType(e){ 
				this.twoTypeList= []; 
				//切换企业类型 ,获取二级企业类型
				/* const res = await  uni.$api.getCompanyTypeList({
					processId : this.processList[this.companyIndex].value,
					code : this.processList[this.companyIndex].code,
					parentId : e
				});  
				 if(res.data.code == 0){
				 	for (var i = 0; i < res.data.data.length; i++) {
				 		this.twoTypeList.push({
				 			value:res.data.data[i].VALUE,
				 			text:res.data.data[i].TEXT 
				 		})
				 	}
				 } */
			},
			async initSearchData(){
				const res = await  uni.$api.getProcessCodeList({
					typeWhite: this.typeWhiteList
				}); 
				if(res.data.code == 0){
					for (var i = 0; i < res.data.data.length; i++) {
						this.processList.push({
							value:res.data.data[i].id,
							text:res.data.data[i].name,
							code:res.data.data[i].code
						})
					}
				} 
				const res2 = await  uni.$api.getSupervisePersonList();
				this.supervisePersonList = res2.data.data
				uni.setStorageSync('regulatoryProcessList', this.processList);
			},
			selectedDate(e){ 
				// this.checkTimeArr = e.value
				// this.checkTimeStr = e.value[0] + '至' + e.value[1]
				if(e.value[0] != undefined && e.value[1] != undefined) {
					this.checkTimeArr = e.value
					this.checkTimeStr = e.value[0] + '至' + e.value[1]
				}
			},
			showDate(){
				 this.$refs.calendar2.open()
			},
			clearDate(){
				 this.checkTimeArr = []
				 this.checkTimeStr = ''
			},
			cancellation(){
				//取消  
				this.$emit('seacharResult', {search:false});
			},
			clearAllParams(){
				//清空所有内容
				this.processResults = '' //主体名称
				this.companyName = '' //主体名称
				this.caseStatus = '' //是否立案
				this.companyAddress = '' //地址信息
				this.checkStatus = ''//检查情况
				this.creditCode = ''//社会信用代码
				this.companyLevel = ''//企业等级
				this.companyProcess = ''//监管环节
				this.firstType = ''
				// 2024-12-5 新增
				this.isOperate = ''
				this.twoType = ''//二级业态
				this.supervisePerson = ''//网格负责人
				this.existPeriphery = ''//是否校园周边
				this.existWholesaleAgricultura = ''//是否农产批发
				this.existEx = ''//是否主体异常
				this.onlyPrePackaging = ''//仅售预包装食品
				this.haveSpecialFood = ''//含特殊食品销售
				this.checkTimeArr[0] = ''//开始时间
				this.checkTimeArr[1] = ''//结束时间
				
			},
			confirmBtn(){
				//确定  
				//业态编码-2025-2-10菊平需要
				const validCompanyIndex = this.companyIndex !== undefined && this.processList[this.companyIndex] !== undefined;
				const code = validCompanyIndex ? this.processList[this.companyIndex].code : '';
				
				this.$emit('seacharResult', {
					search:true,
					processResults: this.processResults, //主体名称
					companyName: this.companyName, //主体名称
					caseStatus: this.caseStatus, //是否立案
					companyAddress: this.companyAddress, //地址信息
					checkStatus: this.checkStatus,//检查情况
					creditCode: this.creditCode,//社会信用代码
					companyLevel: this.companyLevel,//企业等级
					processId:this.companyProcess,//监管环节
					businessFormatId: this.firstType,//一级业态
					// 2024-12-5 新增
					isOperate: this.isOperate,
					twoType: this.twoType,//二级业态
					superviseId:this.supervisePerson,//网格负责人
					existPeriphery: this.existPeriphery,//是否校园周边
					existWholesaleAgricultura: this.existWholesaleAgricultura,//是否农产批发
					existEx: this.existEx,//是否主体异常
					onlyPrePackaging: this.onlyPrePackaging,//仅售预包装食品
					haveSpecialFood: this.haveSpecialFood,//含特殊食品销售
					startTime: this.checkTimeArr[0],//开始时间
					endTime: this.checkTimeArr[1],//结束时间
					code: code//业态编码-2025-2-10菊平需要
				});
			}
		}
	}
</script>

<style  lang="scss">
	.popupContent {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0; 
		.uni-datetime-picker {
			width: 100%;
		}

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: url('../static/img/popupTitle.png') no-repeat center center;
			background-size: cover;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-indent: 45rpx;
		}

		.ul { 
			overflow-y: auto;
			padding-bottom: 100px;
			.li {
				padding: 0 45rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 68rpx;
				line-height: 68rpx;
				border-bottom: 1px solid #d6d6d6;

				.left {
					font-size: 21rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					width: 200rpx;
					color: #333333;
					display: flex;
					justify-content: flex-start;
				}

				.right {
					width: 530rpx;
					
					input {
						font-size: 21rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						width: 460rpx;
						text-indent: 20rpx;
					}

					.placeholder-class {
						color: #999999;
					}

					.uni-stat__select {
						width: 460rpx;

						/deep/.uni-select {
							border: none;
							padding: 0;
						}
					}

					.uni-date {
						width: 460rpx;

						/deep/.uni-date-editor--x {
							border: none;
						}
					}
					
					/deep/.uni-select {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: left;
					}
					
					/deep/.uni-select__selector {
						padding: 0;
					}
					
					/deep/.uni-select__input-placeholder {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
					
					/deep/.uni-select__selector-item {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 5px 10px !important;
						text-align: left !important;
						line-height: 1.6 !important;
					}
					
					/deep/.uni-select__input-box {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 100%;
					}
					
					/deep/.uni-select__input-box view:last-child {
						display: flex;
					}
					
					/deep/.uni-select__selector-empty {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}

				&:nth-child(odd) {
					background: #F9F9F9;
				}

				&:last-child {
					border-bottom: none;
				}
			}

			.li:last-child {
				/deep/.uni-select__selector {
					top: initial;
				}

				/deep/.uni-popper__arrow {
					display: none;
				}
			}
		}
 
	}
	.button{
		display: flex;
		flex-direction: row;
		height: 80px;
		width: 600rpx;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0px;
		background-color: #ffffff;
	}
	.determine{ 
		width: 189px;
		height: 38px;
		line-height: 38px;
		background: #0552A9;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;  
		box-sizing: border-box;
		font-size: 10px;
		color: #ffffff;
		text-align: center;  
		border-radius: 5px; 
		cursor: pointer;
	}
	.cancellation{ 
		width: 189px;
		height: 38px;
		line-height: 38px; 
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;  
		box-sizing: border-box;
		font-size: 10px;
		text-align: center;  
		border-radius: 5px; 
		cursor: pointer;
		border: 1px solid #979797;
		color: #979797;
	 
	}
	.uni-date-x{
		height: 40px;
	}
	.uni-date-editor--x{
		height: 40px;
	}
	
	/deep/.uni-select__selector {
		width: calc(100% + 30px) !important;
	}
	
	/deep/.uni-select__selector-scroll {
		width: calc(100% + 30px) !important;
	}
</style>